<!--  -->
<template>
  <div>
    <Card>
      <div slot="title" >
         <Button v-if="btnp.appbben_tjbb" @click="handleClickAdd" class="zh-hollow" type="primary" icon="plus-round">添加版本</Button>
      </div>
      <Tabs type="card" v-model="tabName" @on-click="handleClickTabs">
        <TabPane style="paddingLeft:2px;" v-for="item in tabs" :key="item.name"  :name="item.name" :label="item.label">
          <div style="margin-bottom:10px">
            <span>强制更新版本：</span>
            <span v-if="!btnType">{{version}}</span>
            <Select v-else v-model="version_uuid" style="width:100px;marginRight:15px;" >
              <Option v-for="item in versionList" :value="item.uuid" :key="item.uuid">{{ item.version }}</Option>
            </Select>
            <Button v-if="!btnType&&btnp.appbben_xg" @click="btnType=true" type='text' style="color:#2D8CF0">修改</Button>
            <Button v-if="btnType&&btnp.appbben_xg" @click="changeVer" type='text' style="color:#2D8CF0">完成</Button>
          </div>
          <Table border :columns="columns" :data="data"></Table>
          <Page :total="total" show-total show-sizer :current.sync="pageNumber" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
        </TabPane>
      </Tabs>
    </Card>
    <Modal :loading="saveloading" v-model="modal_ver" :title="modalTitle" @on-ok="save" ok-text="保存" cancel-text="放弃操作" :mask-closable="false">
      <Form :model="verForm" :label-width="90" style="padding:15px 30px;">
        <FormItem label="客户端类型*">
			<Input v-if="modalTitle=='编辑版本信息'" v-model="verForm.lastest_version" readonly></Input>
			<Select v-else v-model="verForm.appType"  >
				<Option v-for="item in tabs" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
        </FormItem>
        <FormItem label="版本号*">
          <Input v-model="verForm.lastest_version" ></Input>
        </FormItem>
        <FormItem label="更新说明">
            <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="verForm.content" ></Input>
        </FormItem>
        <FormItem label="更新时间*">
            <DatePicker type="date" @on-change="dateChange"  ></DatePicker>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getVersionTable,getVerOption,changeVesion,saveAppVer} from '@/libs/system.js'
export default {
	name:'',
	data () {
		return {
			saveloading:true,
			btnp:{},
			btn:{
				appbben_tjbb:false,
				appbben_xg:false,
				appbben_bj:false
			},
			pageNumber:1,
			pageSize:10,
			verForm:{
				uuid:'',
				name:'',
				appType:'',
				lastest_version:'',
				content:'',
				time:''
			},
			modal_ver:false,
			modalTitle:'',
			total:3,
			version_uuid:'',
			version:'',
			btnType:false,
			typeVersion:'',
			versionList:[],
			tabName:'iosUser',
			tabvk:{
				iosUser:1,
				iosPro:2,
				andUser:3,
				andPro:4
			},
			tabs:[
				{
					name:'iosUser',
					label:'IOS报修版',
					value:1
				},
				{
					name:'andUser',
					label:'安卓报修版',
					value:3
				},
				{
					name:'iosPro',
					label:'IOS专业版',
					value:2
				},
				{
					name:'andPro',
					label:'安卓专业版',
					value:4
				}
			],
			columns:[
				{
				key:'name',
				title:'版本类型',
				align:'center',
				minWidth:100
				},{
				key:'lastest_version',
				title:'版本号',
				align:'center',
				minWidth:80
				},{
				key:'content',
				title:'更新说明',
				minWidth:200
				},{
				key:'time',
				title:'更新时间',
				align:'center',
				minWidth:100
				},{
				key:'action',
				title:'操作',
				align:'center',
				fixed:'right',
				minWidth:80,
				render:(h,params)=>{
					return h('div',[
					h('Button',{
						props:{
						type:'text',
						size:'small'
						},
						style:{
						color:'#2D8CF0',
						display:this.btnp.appbben_bj?'inline-block':'none'
						},
						on:{
						click:()=>{
							this.modal_ver=true;
							this.modalTitle='编辑版本信息';
							this.gotoEdit(params.row)
						}
						}
					},'编辑'),
					])
				}
				}
			],
			data:[]
		};
	},
	methods:{
		pageChange(number){
			this.pageNumber=number;
			this.getTable();
		},
		pageSizeChange(size){
			this.pageSize=size;
			this.getTable();
		},
		dateChange(date){
			this.verForm.time=date;
		},
		gotoEdit(obj){
			this.verForm={
				uuid:obj.uuid,
				name:obj.name,
				appType:this.tabvk[this.tabName],
				lastest_version:obj.lastest_version,
				content:obj.content,
				time:obj.time
			}
		},
		async save(){
			const reg=/^\d+(\.\d+)+(\.\d+)$/;
			if(!this.verForm.appType){
				this.$Notice.error({
					desc:'请选择客户端类型'
				});
			}else if(this.verForm.lastest_version==''){
				this.$Notice.error({
					desc:'请输入版本号'
				});
			}else if(!reg.test(this.verForm.lastest_version)){
				this.$Notice.error({
					desc:'版本号格式错误'
				});
			}else if(this.verForm.time==''){
				this.$Notice.error({
					desc:'请选择更新时间'
				});
			}else{
				let form =JSON.parse(JSON.stringify(this.verForm));
				let res=await saveAppVer(form);
				let response=res.data;
				if(response.code===200){
					this.$Notice.success({
						desc:'已保存'
					});
					this.getTable();
					this.modal_ver=false;
				}else{
					this.$Notice.error({
						desc:response.msg
					});
				}
			}
			let that=this;
			this.saveloading=false;
			setTimeout(() => {
				that.saveloading=true;
			}, 500);
		},
		async changeVer(){
			let res=await changeVesion(this.version_uuid);
			let response=res.data;
			if(response.code===200){
				this.$Notice.error({
					desc:'已修改'
				});
				this.getlist();
				this.btnType=false;
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getTable(){
			this.loading=true;
			let res=await getVersionTable(this.tabvk[this.tabName],this.pageNumber,this.pageSize);
			let response=res.data;
			if(response.code===200){
				this.total=response.data.total;
				this.data=response.data.rows
				this.loading=false;
			}else{
				this.$Notice.error({
					title: '请求出错',
					desc:response.msg
				});
			}
		
		},
		async getlist(){
			
			let res=await getVerOption(this.tabvk[this.tabName]);
			let response=res.data;
			if(response.code===200){
				this.versionList=response.data.allUpdate;
				this.version=response.data.forceUpdate[0].version;
				this.version_uuid=response.data.forceUpdate[0].uuid;
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		dateChange(date){
		this.verForm.time=date;
		},
		handleClickAdd(){
		this.modal_ver=true;
		this.modalTitle='新增版本';
		},
		handleClickTabs(name){
			this.pageNumber=1;
			this.pageSize=10;
			this.btnType=false;
			this.getTable();
			this.getlist();
		}
	},
	watch:{
		modal_ver:function(){
			if(!this.modal_ver){
				this.verForm={
					uuid:'',
					appType:'',
					lastest_version:'',
					content:'',
					time:'',
					name:''
				}
			}
		}
	},
	created(){
		this.btnp=util.bpower(this,this.btn);
		this.getTable();
		this.getlist();
	}
}

</script>
<style lang='scss' >
</style>